<template>
  <div :class="prefixCls" class="notify-item">
    <Badge
      :count="count"
      :offset="[4, -8]"
      @click="onNoticeClick"
      class="cursor-pointer"
      :numberStyle="numberStyle"
      ><Icon icon="ci:bell" size="24"
    /></Badge>
    <MsgDrawer @register="registerDrawer" />
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { Badge } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import MsgDrawer from './MsgDrawer.vue';
  import { useIntervalFn } from '@vueuse/core';

  import { useDesign } from '/@/hooks/web/useDesign';
  // import { useMessage } from '/@/hooks/web/useMessage';
  import { getCountMsgApi } from '/@/api/sys/msg';
  import { useDrawer } from '/@/components/Drawer';

  const ONE_SECONDS = 1000;
  const step = 20;

  export default defineComponent({
    components: { Icon, Badge, MsgDrawer },
    setup() {
      const { prefixCls } = useDesign('header-notify');
      const [registerDrawer, { openDrawer }] = useDrawer();

      const count = ref(0);
      useIntervalFn(getCount, step * ONE_SECONDS);

      getCount();

      async function getCount() {
        count.value = await getCountMsgApi();
      }

      async function onNoticeClick() {
        openDrawer();
      }

      return {
        prefixCls,
        count,
        registerDrawer,
        onNoticeClick,
        numberStyle: {
          boxShadow: 'none',
          paddingRight: '2px',
          transform: 'scale(0.75)',
        },
      };
    },
  });
</script>
<style lang="less">
  @prefix-cls: ~'@{namespace}-header-notify';

  .@{prefix-cls} {
    padding-top: 6px;

    &__overlay {
      width: 320px;

      .ant-popover-arrow {
        width: 35px;
        height: 35px;
        top: -10px;
      }

      .ant-popover-arrow-content {
        width: 24px;
        height: 25px;
      }

      .ant-popover-inner-content {
        padding: 0;
      }
    }

    .ant-tabs-content {
      width: 300px;
    }

    .ant-badge {
      font-size: 18px;
      color: @white;

      .ant-badge-multiple-words {
        padding: 0 4px;
      }

      .ant-badge-dot {
        box-shadow: none;
      }

      svg {
        width: 0.9em;
      }
    }
  }
</style>
